<template>
  <div>
    <a-drawer
      :title="titleDraw"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
    </a-drawer>
    <a-table
      :columns="columns"
      :row-key="record => record.login.uuid"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <span slot="phone" slot-scope="phone">
        <a-tag
          v-for="tag in phone"
          :key="tag"
          :color="
            tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'
          "
        >
          {{ tag.toUpperCase() }}
        </a-tag>
      </span>
      <span slot="operation" slot-scope="text, record">
        <a class="look" v-if="record.name" @click="examine">查看</a>
        <a-divider type="vertical" />
        <a class="check" @click="edit">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
          title="你确定删除该地址么?"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirm"
          @cancel="cancel"
        >
          <a class="detele">删除</a>
        </a-popconfirm>
      </span>
      <template slot="name" slot-scope="name">
        {{ name.first }} {{ name.last }}
      </template>
      <template slot="title" slot-scope="">
        <essay-header
          :title="title"
          :tableData="tableData"
          @search="search"
          :btnmsg="btnmsg"
          :btnshow="true"
          @add="addDrawer"
        />
      </template>
    </a-table>
  </div>
</template>
<style scoped lang="less">
/deep/.ant-table-tbody {
  background: #fff;
}
/deep/.ant-table-title {
  padding: 0;
}
.look {
  color: rgb(63, 118, 113);
}
.check {
  color: rgb(163, 107, 35);
}
.detele {
  color: red;
}
.header {
  width: 100%;
  background: #fff;
  display: flex;
  padding: 16px 16px;

  .title {
    flex: 1;
    font-size: 16px;
    color: black;
    font-weight: 500;
  }
  .seacher_add {
    display: flex;
    justify-content: space-around;
    flex: 1;
    .seacher {
      display: flex;
    }
  }
}
</style>
<script>
import axios from "axios";
// import request from "../../utils/request";
const queryData = params => {
  return axios.get("https://randomuser.me/api",
    { params: params }
  );
};
const columns = [
  {
    title: "时间",
    dataIndex: "name",
    sorter: true,
    width: "16.6%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "警格",
    dataIndex: "gender",
    width: "16.6%",
    scopedSlots: { customRender: "gender" }
  },
  {
    title: "街路巷",
    dataIndex: "email",
    width: "16.6%",
    scopedSlots: { customRender: "email" }
  },
  {
    title: "门牌号",
    dataIndex: "doors",
    width: "16.6%",
    scopedSlots: { customRender: "doors" }
  },
  {
    title: "类型",
    dataIndex: "",
    width: "16.6%",
    scopedSlots: { customRender: "" }
  },
  {
    title: "操作",
    dataIndex: "operation",
    width: "16.6%",
    scopedSlots: { customRender: "operation" }
  }
];
import EssayHeader from "../../components/EssayHeader.vue";
import { message } from "ant-design-vue";
export default {
  components: {
    EssayHeader
  },
  data() {
    return {
      title: "标准地址",
      btnmsg: "新增标准地址",
      btnshow: true,
      tableData: {
        value: []
      },
      titleDraw: "查看地址",
      data: [],
      visible: false,
      pagination: {},
      loading: false,
      columns
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    // 新增
    addDrawer() {
      this.visible = true;
      this.titleDraw = "新增标准地址";
    },
    // 查看examine
    examine() {
      this.visible = true;
      this.titleDraw = "查看标准地址";
    },
    // 编辑check
    edit() {
      this.visible = true;
      this.titleDraw = "编辑标准地址";
    },
    //删除detele
    confirm(e) {
      console.log(e);
      message.success("删除成功");
    },
    cancel(e) {
      console.log(e);
      message.error("取消成功");
    },
    afterVisibleChange(val) {
      console.log("visible", val);
    },
    onClose() {
      this.visible = false;
    },
    // 搜索
    search(params) {
      console.info("search", params);
    },
    insert(params) {
      console.info("insert", params);
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      });
    },
    fetch(params = {}) {
      this.loading = true;
      queryData({
        results: 10,
        ...params
      }).then(({ data }) => {
        const pagination = { ...this.pagination };
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = 200;
        this.loading = false;
        this.data = data.results;
        this.pagination = pagination;
      });
    }
  }
};
</script>
